<template>
  <div>
    <!-- 搜索框 -->
    <div class="search">
      <span>姓名：</span>
      <el-input style="width: 200px;" size="mini" v-model="name" 
        placeholder="请输入姓名"></el-input>
      <el-button style="margin-left: 8px;" size="mini" 
        type="primary" @click="loadList">查询</el-button>
      <el-button style="margin-left: 8px;" size="mini" 
        type="info" @click="$refs.edit.drawer=true">添加</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="rows" style="width: 98%">
      <el-table-column prop="loginId" label="账号" width="100"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="60"> </el-table-column>
      <el-table-column label="头像" width="120"> 
        <template slot-scope="scope">
          <el-image
          style="width: 80px; height: 80px"
          :src="scope.row.photo"
          fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="120"> </el-table-column>
      <el-table-column prop="type" label="类型" width="100"> </el-table-column>
      <el-table-column label="入职日期" width="120">
        <template slot-scope="scope">
          {{scope.row.inDate | toDate}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row.loginId)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.loginId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination style="margin-top: 8px;"
      :current-page.sync="pageIndex"
      :pageSize="pageSize"
      background
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
    <!-- 编辑组件 -->
    <EditUser ref="edit" @sync-list="loadList"></EditUser>
  </div>
</template>

<script>
import {$list,$delByLoginId} from '../api/adminAPI'
import EditUser from '@/components/EditUser.vue';
export default {
  components:{
    EditUser
  },
  filters:{
    toDate(val){
      let date = new Date(val)
      let y = date.getFullYear()
      let m = date.getMonth()+1
      let d = date.getDate()
      return [y,m,d].map(r=>r<10?'0'+r:r).join('-')
    }
  },
  data() {
    return {
      //姓名（用于搜索）
      name:'',
      //当前页
      pageIndex:1,
      //每页数量
      pageSize:6,
      // 数据行
      rows: [],
      // 总数量
      total:0
    };
  },
  methods:{
    //加载列表的方法
    async loadList(){
      let {total,rows} = await $list({
        name:this.name,
        pageIndex:this.pageIndex,
        pageSize:this.pageSize
      })
      this.rows = rows
      this.total = total
    },
    //编辑
    handleEdit(loginId){
      this.$refs.edit.drawer = true
      this.$refs.edit.loginId = loginId
    },
    //删除
    handleDelete(loginId){
      this.$confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let ret = await $delByLoginId({loginId})
          if(ret.code==0){
            this.$message({
              message:'删除成功',
              type:'success'
            })
            this.loadList()
          }else{
            this.$message({
              message:'删除失败',
              type:'error'
            })
          }
        }).catch(() => {});
    }
  },
  watch:{
    pageIndex(){
      this.loadList()
    }
  },
  mounted(){
    this.loadList()
  }
};
</script>

<style lang="scss" scoped>
.search{
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  span{
    width: 50px;
    font-size: 14px;
    color: #666;
  }
}
</style>
